<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        div {
            margin: 50px auto;
            width: 550px;

        }

        table {
            padding-bottom: 120px;
        }

        body {
            background: url("./image/c.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;
            backdrop-filter: blur(5px);
        }

        .aaa {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<div id="as">


    <table class="table table-hover">
        <thead>
        <td>序号</td>
        <td>品种名称</td>
        <td>链接</td>
        </thead>
        <tr v-for="i in list" :key="i">
            <td class="info">{{id}}</td>
            <td class="warning">{{i.name}}</td>
            <td class="active"><a :href="i.charst">{{i.charst}}</a></td>
        </tr>


        <tr>
            <td colspan="3" align="center" class="breadcrumb"><a href="serch.html">重新查询</a></td>
        </tr>

    </table>

</div>
<script src="axios.min.js"></script>
<script>
    $("thead").css("background", "lightsteelblue")
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script type="module">
    const {createApp, ref, reactive, onMounted} = Vue;
    //import { createApp, ref,reactive,onMounted} from "./vue.esm.js"无法使用本地引入，不知道哪里出了错
    const app = createApp({
        setup() {
            const list = reactive([])
            const id = ref(0)
            const num = ref(0)
            const num1 = ref(0)
            // 从URL参数或请求参数中获取数据,代码的作用是从当前页面的 URL 查询字符串中获取 name 参数的值，并将其赋值给变量 name。
            //const chaxun = new URLSearchParams(window.location.search).get('chaxun');
            /*
                它是从 URL 的查询字符串中提取参数值。URL 查询字符串是 URL 中跟在问号 ? 后面的部分，通常用于传递一些额外的信息，比如搜索关键词、用户 ID 等。代码中的 URLSearchParams 是一个专门用来解析这类查询字符串的工具，而 .get('name') 则是用来获取特定参数值的方法。
                window.location 是一个浏览器内置对象，它包含了当前页面的 URL 信息。
                .search 属性获取的是 URL 中查询字符串部分，也就是从问号 ? 开始的部分,或者是请求携带的参数。
                例如，如果当前页面的 URL 是 http://example.com/page.html?name=John&age=30，那么 window.location.search 的值就是 "?name=John&age=30"。
                URLSearchParams 是一个浏览器内置的构造函数，用于处理查询字符串。
                将 window.location.search 传递给它，会创建一个查询字符串解析对象，这个对象可以方便地对查询字符串中的参数进行操作。

             */


            const ad = async () => {
                const chaxun = new URLSearchParams(window.location.search).get('chaxun');

                try {
                    //console.log(chaxun)
                    //挂载一个值并传到servlt里，servlet通过请求进行获取
                    //axios.get(url, config) 的第二个参数 config 需要明确指定参数位置：
                    const {data} = await axios.get("./queryone", {params: {chaxun: chaxun}});
                // ./queryone 是一个相对路径，而 /queryone 是一个绝对路径
//                     相对路径 是基于当前请求的路径进行解析的。
// 如果当前请求的路径是 /app/home，而你在代码中使用了 ./queryone，那么路径会被解析为 /app/queryone。
// 这是因为 ./ 表示当前目录，queryone 是相对于当前目录的路径。
//                     绝对路径 是从当前 Web 应用的上下文根（context root）开始解析的。
// 如果你的应用的上下文根是 /app，那么 /queryone 会被解析为 /app/queryone。
// 如果你的应用的上下文根是 /（比如部署在根路径下），那么 /queryone 会被解析为 /queryone。
                    // {chaxun: chaxun}，直接传递值（非对象）
                    //后端接口要求以查询字符串的形式发送参数（是 get 请求的用法），通过 params 配置项来传递
                    //Axios 的 GET 请求需要通过 params 配置项传递参数，要注意，否则无法把值传到servlet，是null
                    //使用post无法传参，我也不知道该怎么解决const { data } = await axios.post("./queryone",{params:{chaxun: chaxun}});
                    //绝对路径const { data } = await axios.get("http://localhost:8080/atry_war_exploded/queryone");
                    //console.log(data);
                    const qq = data.caa;
                    const fi = qq.match(/(\w*)='([^']+)'/g) || [];
                    const user = {};
                    fi.forEach(fi => {
                        const [key, value] = fi.split('=');
                        user[key] = value.replace(/^'|"|'$|"/g, ''); // 去掉引号
                    });
                    //console.log(user)
                    list.push(user)
                    //console.log(list[0].name)
                    id.value = qq.match(/id=(\d+)/)[1]
                } catch (error) {
                    console.error('获取文本失败:', error);
                }
                //console.log(id.value)
            }
            onMounted(() => {
                ad();
            });

            return {
                ad, id, list, num, num1
            }
        }
    })
    app.mount("#as");

</script>

</body>

</html>